<template>
  <div class="luckdraw">
    <!-- <img src="@/assets/bg.png" alt="" /> -->
    <div class="luckdraw-circular">
      <div v-for="(i, index) in luckdrawList.length * 3" :key="index"></div>
    </div>
    <div class="luckdraw-body">
      <div
        class="luckdraw-body-x"
        v-for="(i, index) in luckdrawList"
        :key="index"
        :style="{ transform: 'rotate(' + i.angle + 'deg)' }"
      ></div>
      <div
        class="luckdraw-body-text"
        v-for="(i, index) in luckdrawList"
        :key="index"
        :style="{ transform: 'rotate(' + (i.angle + 22) + 'deg)' }"
      >
        {{ i.text }} {{ i.grade }}
      </div>
    </div>
    <div class="luckdraw-bot" @click="submit"></div>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive } from "vue";
export default defineComponent({
  setup() {
    interface luckdraw {
      text: string;
      grade: string;
      location: number;
      rate: number;
      type: number;
      min?: number;
      max?: number;
    }
    /*
        location 位置
        rate： 中奖比例 一共100
        type 是否中将  1中将 2 未中奖
        min:'中奖最小范围
        max:'中奖最大范围
    */
    let luckdrawList: any = reactive<luckdraw[]>([
      { text: "金龙鱼", grade: "1等奖", location: 1, rate: 9.99, type: 1 },
      { text: "方便面", grade: "2等奖", location: 2, rate: 10, type: 1 },
      { text: "大龙虾", grade: "3等奖", location: 3, rate: 10, type: 1 },
      {
        text: "三亚旅游往返机票",
        grade: "4等奖",
        location: 4,
        rate: 0.01,
        type: 1,
      },
      { text: "谢谢惠顾", grade: "5等奖", location: 5, rate: 10, type: 1 },
      { text: "谢谢惠顾", grade: "6等奖", location: 6, rate: 10, type: 1 },
      { text: "谢谢惠顾", grade: "7等奖", location: 7, rate: 10, type: 1 },
      { text: "谢谢惠顾", grade: "8等奖", location: 8, rate: 40, type: 1 },
    ]);
    onMounted(() => {
      // 设置圆圈
      let circular =
        document.querySelector<HTMLElement>(".luckdraw-circular")?.children;
      let Arrcircular = [...(circular as any)]; //转化伪数组
      //   console.log("circular", Arrcircular);
      for (var i = 0; i < Arrcircular.length; i++) {
        let deg = (360 / Arrcircular.length) * i;
        Arrcircular[i].style.transform = `rotate(${deg}deg)`;
      }
    });
    let serangle = () => {
      let len = luckdrawList.length;
      let base = 360 / len;
      luckdrawList.forEach((item: any, index: number) => {
        item.angle = 360 - index * base;
      });
    };
    serangle();
    let issubmit = false; //控制抽奖按钮
    // 抽奖
    let submit = () => {
      if (issubmit) {
        return;
      }
      let timr: number = 5; //默认转圈时间
      issubmit = true;
      // 生成1到100随机数 查看中将结果
      let randomNumer: number = Math.random() * 100;
      console.log("randomNumer", randomNumer);
      // 添加数组中奖范围
      let num: number = 0; //最小值
      luckdrawList.forEach((item: luckdraw) => {
        console.log(item);
        item.min = num;
        num += item.rate; //根据中奖几率设置每个模块最大中奖范围
        item.max = num;
      });
      //   获取中奖结果
      let refObj: luckdraw = luckdrawList.filter((item: any) => {
        return randomNumer >= item.min && randomNumer < item.max;
      })[0];
      console.log(refObj.grade, refObj.text, refObj.location);
      //计算轮盘旋转角度(当前中奖结果位置location  * 每个中奖位置角度)
      let angleNumber = (refObj.location - 1) * (360 / luckdrawList.length);
      console.log("angleNumber", angleNumber);

      //   设定至少转5圈
      let rotate: number = angleNumber + 5 * 360;
      console.log("最后指针的角度", rotate);
      //   可以算一下一圈转多少时间
      //   let rotateSpeed: any = ((angleNumber / 360) * 1 + 5).toFixed(2);
      //   console.log(angleNumber / 360);
      timr = angleNumber / 360 + 5;
      //   获取DOM元素
      let Domluckdraw: any = document.querySelector(".luckdraw-body");
      //   设置定时器
      Domluckdraw.style.transform = ``;
      Domluckdraw.style.transition = ``;
      setTimeout(() => {
        Domluckdraw.style.transform = `rotate(${rotate - 22}deg)`;
        Domluckdraw.style.transition = `transform ${timr}s cubic-bezier(0.1, 0.1, 0.1, 1)`;
        issubmit = false;
      }, 100);
    };

    return {
      luckdrawList,
      submit,
    };
  },
});
</script>
<style lang="scss" scoped>
@keyframes form {
  from {
    background: #fff;
  }
  to {
    background: #b2a98d;
  }
}
.luckdraw {
  height: 480px;
  width: 480px;
  border-radius: 50%;
  background: coral;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  //   box-shadow: 0 0 20px #b2a98d;
  img {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    height: 100%;
    width: 100%;
  }
  &-circular {
    position: absolute;
    background: #e0ddd1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    > div {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      height: 100%;
      width: 10px;
      margin: 0 auto;
      transform-origin: center center;
      &::after {
        position: absolute;
        top: 5px;
        left: 0;
        right: 0;
        margin: 0 auto;
        content: "";
        height: 10px;
        width: 10px;
        border-radius: 50%;
        background: red;
      }
      &:nth-of-type(odd)::after {
        background: #b2a98d;
        animation: form 1s linear reverse infinite;
      }
      &:nth-of-type(even)::after {
        animation: form 1s linear infinite;
        background: #fff;
      }
    }
  }
  &-body {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: url(../assets/bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    &-x {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      margin: 0 auto;
      width: 1px;
      height: 100%;
      background: #d7a945;
      transform-origin: center center;
    }
    &-text {
      position: absolute;
      top: 0;
      left: 0;
      height: calc(100% - 40px);
      width: 100%;
      padding: 20px 0;
      z-index: 10;
    }
  }
  &-bot {
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: -70px auto;
    z-index: 99;
    width: 100px;
    height: 123px;
    object-fit: cover;
    border-radius: 50%;
    // background: #fff;
    // border: 5px solid #fff;
    // box-shadow: 0 0 0 5px #b9a046;
    text-align: center;
    line-height: 16px;
    color: #b9a046;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    background-image: url(../assets/an.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
}
</style>